<template>
	<view class="hmj-order">
		<u-navbar title="订单确认" :autoBack="true" :bgColor="bgColor" titleStyle="color:#000;fontWeight: bold;"></u-navbar>
		<view class="order-tabBar">
			<view class="notice-bar pl24 pr24 ml24 mr24" :style="{'marginTop':statusHeight}" ><u-notice-bar :text="noticeText" color="#F14537"></u-notice-bar></view>
			<view class="order-address pl30 pr30 ml24 mr24 mt16 bac_f radius16 pb40">
				<view class="address" @click="openAddressPop">
					<view class="dis_f mt40 jcsb">
						<view class="df">
							<image class="w36 h36" src="../../static/image/confirm1.png" mode="aspectFill"></image>
							<text v-if="address_list.length == 0" class="fz30 tf_999 ml24">请填写服务地址</text>
							<view v-else class="ml24">
								<view class="fz30 fw tf_22">{{ current_address.address1 }}</view>
								<view class="fz26 tf_999">
									<text>{{ current_address.name }}</text>
									<text class="ml16">{{ current_address.phone }}</text>
								</view>
							</view>
						</view>
						<image class="w20" src="../../static/image/spec-jiantou.png" mode="widthFix"></image>
					</view>
					<view class="address-tips fz20 mt16 ml60 pt10 pb10 pl12 pr12 radius6" style="color: #7b93b0; background-color: #f1f4f7">地址信息仅供服务者上门时使用</view>
				</view>
				<view class="time" @click="show_time_cik">
					<view class="dis_flex mt30">
						<view class="dis_f">
							<image class="w36" src="../../static/image/confirm2.png" mode="widthFix"></image>
							<text v-if="!current_time" class="fz30 tf_999 ml24">请选择上门时间</text>
							<view v-else class="ml24 fz30 fw">{{ current_year }}-{{ current_date }}&nbsp;&nbsp;{{ current_time }}</view>
						</view>
						<image class="w20" src="../../static/image/spec-jiantou.png" mode="widthFix"></image>
					</view>
					<view class="time-tips fz20 mt16 ml60 pt10 pb10 pl12 pr12 radius6" style="color: #7b93b0; background-color: #f1f4f7">系统将为您提供最佳服务者</view>
				</view>
			</view>
		</view>
		<view class="order-sever-content mt24 bac_f radius16 pl30 pr30 pt30 ml24 mr24" v-for="(item, index) in pro_info" :key="index">
			<view class="sever-content dis_f">
				<image class="w156 h156 radius12" :src="item.gg_image" mode="aspectFill"></image>
				<view class="dfd_c ml28 tf_222">
					<text class="fz30 fw">{{ item.name }}</text>
					<text class="fz26 tf_999">{{ item.s_name }}</text>
					<text class="mt30 fz30 fw tf_222" style="align-self: flex-end">¥{{ item.price }}</text>
				</view>
			</view>
			<view class="fz28 tf_999 mt48">服务内容</view>
			<view class="dis_flex fz28 tf_222 mt20">
				<text>{{ item.name }}</text>
			</view>
			<view class="bac_e7 mt40" style="height: 2rpx"></view>
<!-- 			<view class="dis_flex mt38">
				<view class="dis_f">
					<image class="w28" src="../../static/image/confirm3.png" mode="widthFix"></image>
					<text class="ml16 fz28 tf_222">优惠券</text>
				</view>
				<view class="dis_f">
					<text class="mr16 fz28 tf_222">无优惠券可用</text>
					<image class="w20" src="../../static/image/spec-jiantou.png" mode="widthFix"></image>
				</view>
			</view> -->
		</view>
		<view class="order-remark mt24 bac_f radius16 pl30 pr30 pt30 pb30 ml24 mr24">
			<view class="fz30 tf_222">备注选择</view>
			<view class="dis_flex fww">
				<view class="remark-content mt24 radius6" v-for="(v, i) in remark_list" :key="i" @click="selectRemark(v, i)">
					<view class="fz28 bz" :class="{ ractive: current_remark.indexOf(i) != -1 }">{{ v.text }}</view>
				</view>
			</view>
			<view class="mt30"><uni-easyinput autoHeight type="textarea" v-model="textArea" placeholder="请输入内容，有助于我们为您提供更好的服务"></uni-easyinput></view>
		</view>
		<view class="order-tips">
			<image
				class="radius16 ml24 mr24 w702 mt24"
				src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221014/439b8a215ff52aba10ae8a0590d9b8ac.jpg"
				mode="widthFix"
			></image>
		</view>
		<view class="h160"></view>
		<view class="bac_f order-footer dis_flex padding24 p_f" style="width: 100%; box-sizing: border-box; z-index: 100">
			<view class="dis_f ml18" @click="priceInfo">
				<text class="fz40 fw tf1">￥{{ total }}</text>
				<text class="fz20 tf_999 ml12">明细</text>
				<image class="w12 ml12" src="../../static/image/confirm_shang.png" mode="widthFix"></image>
			</view>
			<view class="col-th radius8 w220 h88 tf fz32 dis_f jc ml24" @click="goPay">预约并支付</view>
		</view>
		<!-- 弹出窗 -->
		<!-- 选择服务地址 -->
		<u-popup :show="addressPopshow" mode="bottom" @close="addressPopshow = false">
			<view class="pop-title dis_f radius_5 jc bac11" style="height: 98rpx">
				<text class="fz34 tf33 ml238">选择服务地址</text>
				<image @click="addressPopshow = false" class="w44 ml238" src="../../static/image/server_close.png" mode="widthFix"></image>
			</view>
			<view class="radius_5 pop-cart-address">
				<view class="bac_f padding30 bz w" style="padding-bottom: 0"></view>
				<view v-if="address_list.length == 0" class="">
					<u-empty
						text="您还没有服务地址，快去添加吧!"
						icon="https://zsjf-bucket.oss-cn-beijing.aliyuncs.com/uploads/20220714/ff3807efb285d0598d673dccc5308bec.png"
						marginTop="40"
					></u-empty>
				</view>
				<view v-else v-for="(v, i) in address_list" :key="i" class="w690 auto fz26 h136 border_b3 dis_flex">
					<view class="ml24" @click="selectAddress(i)">
						<view class="dis_f">
							<view style="max-width: 500rpx" class="fz28">{{ v.address1 }}</view>
							<view v-if="v.default == 1" class="w52 lh28 fz20 tf_4537 border4537 ml12 tac radius4" style="background: rgba(241, 69, 55, 0.1); padding: 0 6rpx">默认</view>
						</view>
						<view class="tf_999 pt10 dis_f fz26">
							{{ v.name }}
							<view class="ml30 fz26">{{ v.phone }}</view>
						</view>
					</view>
					<view class="dis_f">
						<image src="../../static/image/search_del.png" mode="widthFix" class="w32 mr35" @click="delAddress(i)"></image>
						<image src="../../static/image/confirm5.png" mode="widthFix" class="w32" @click="editAddress(v)"></image>
					</view>
				</view>
			</view>
			<view class="w690 lh88 fz32 tf_666 tac border7 mt30 mb30 auto radius8" @click="add_address">新增服务地址</view>
		</u-popup>
		<!-- 选择上门时间 -->
		<u-popup :show="show_time" :round="8" @close="show_time = false" zIndex:10>
			<view class="w h95 dis_f ac je fz30 fw bac_f8 radius_4">
				<view>预约上门时间</view>
				<image src="../../static/image/server_close.png" mode="widthFix" class="w44 mr24 ml238" @click="show_time = false"></image>
			</view>
			<scroll-view scroll-x="true" class="pl40 bz" style="white-space: nowrap">
				<view v-for="(item, index) in tabs_list" :key="index" :class="{ active: isActive == index }" class="mr90 mt30 ib tac p_re pb20" @click="active_cik(index, item.status)">
					<view class="fz28">{{ item.week }}</view>
					<view class="tf_999 fz22" :class="{ active1: isActive == index }">{{ item.date }}</view>
					<image v-if="item.status == 2" src="../../static/image/confirm10.png" mode="widthFix" class="w64 p_ab" style="top: 0; right: -72rpx"></image>
				</view>
			</scroll-view>
			<u-line color="#E5E5E5"></u-line>
			<view>
				<view class="w690 mt20 dis_grid_n4 auto">
					<view class="w166 h88 dis_f jc fz26 mb10" v-for="(item, index) in tabs_list[isActive].time" :key="index">
						<view class="w166 lh80 h81 tac zgg" v-if="item.status == 1" :class="{ active2: is_choice == index }" @click="time_cik(index, item.time)">{{ item.time }}</view>
						<view class="w166 h88 border10 tf_e7 dis_f jc" v-if="item.status == 2">
							<view class="tac">
								<view>{{ item.time }}</view>
								<view>约满</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mt24 mb30 tac fz24 tf_999">受疫情或天气影响，如无法及时上门，请以服务者沟通时间为准</view>
				<u-line color="#E5E5E5"></u-line>
				<view class="w h136 bac_f"></view>
				<view class="p_f w h136 bac_f dis_f ac">
					<view
						class="w690 lh88 tf fz32 tac auto radius8"
						style="
              background-image: linear-gradient(to right, #fe877f, #fe2e27);
            "
						@click="show_time = false"
					>
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 明细 -->
		<u-popup :show="pricePopshow" :round="10" mode="bottom" @close="pricePopshow = false">
			<view class="pop-cart radius_5" style="margin-bottom: 136rpx">
				<view class="pop-title dis_f radius_5 jc bac11" style="height: 98rpx">
					<text class="fz34 tf33 ml238">价格明细</text>
					<image @click="pricePopshow = false" class="w44 ml238" src="../../static/image/server_close.png" mode="widthFix"></image>
				</view>
				<view class="pl30 pr30">
					<view class="mt48 dis_flex fz28 fw" v-for="(item, index) in pro_info" :key="index">
						<text>{{ item.name }}</text>
						<text>¥{{ item.price }}</text>
					</view>
					<!-- 					<view class="fz28 dis_flex mt30">
						<text>优惠券</text>
						<text class="fw">¥60</text>
					</view> -->
					<view class="mt40 h1 bac_e7"></view>
					<view class="dis_f je" style="margin-top: 46rpx; margin-bottom: 46rpx">
						<view>
							<text class="fz20">合计费用</text>
							<text class="tf_4537 fw">￥{{ total }}</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { makeTime, goodsRemark, addressDefault, addressList, addressEdit, addressDel, goPay, goCartPay, goodsDetail } from '@/config/api.js';
export default {
	data() {
		return {
			statusHeight: '', //状态
			store_id: '', //店铺id
			total: '', //总价格
			pro_info: [], //商品信息
			isClick: false, //备注是否被选中
			current_remark: [],
			current_year: '',
			current_time: '', //选择好的时间
			current_date: '', //当前日期
			isAddress: false, //是否存在地址
			serve_id: '',
			remark_list: [], //备注选择列表
			bgColor: 'rgba(255,255,255,0)',
			show_time: false, //选择上门时间
			pricePopshow: false,
			tabs_list: [], //日历数组
			isitem: '', //选择日期的状态
			current_address: [], //当前的地址
			address_default_list: [], //默认地址列表
			address_list: [], //地址列表
			timePopshow: false,
			addressPopshow: false,
			is_choice: '', //时间选择
			textArea: '',
			isActive: 0,
			noticeText: '疫情期间，阿姨将定期测温、工具消毒，服务'
		};
	},
	onLoad(options) {
		let res = wx.getSystemInfoSync();
		this.statusHeight = res.statusBarHeight + 50 + 'px';
		if (options) {
			this.serve_id = options.serve_id;
			this.store_id = options.store_id;
			console.log(options);
		}
		this.getGoodRemark();
		this.getAllAddress();
		this.getAddressDefault();
		this.getOrderInfo();
		//获取当前年份
		let now = new Date();
		this.current_year = now.getFullYear();
		console.log(this.address_list);
		uni.$on('refreshData', () => {
			this.getAllAddress();
			this.getAddressDefault();
		});
		this.get_time_data();
	},
	onPageScroll: function(e) {
		this.bgColor = '#fff';
		if (e.scrollTop == 0) {
			this.bgColor = 'rgba(255,255,255,0)';
		}
	},
	methods: {
		//去支付
		goPay() {
			console.log(!this.current_date);
			if (!this.current_address) {
				uni.showModal({
					title: '提示',
					content: '请填写服务地址'
				});
			} else if (!this.current_time || !this.current_date) {
				uni.showModal({
					title: '提示',
					content: '请填写服务时间'
				});
			} else {
				let id = Number(this.serve_id);
				let address_id = this.current_address.id;
				let data_time = `${this.current_year}+${this.current_date.replace('-', '/')}+${this.current_time}`;
				let text_area = this.textArea;
				let remark_t = [];
				this.current_remark.forEach(v => {
					remark_t.push(this.remark_list[v].text);
				});
				remark_t = remark_t.toString();
				if (this.serve_id) {
					goPay({
						id: this.serve_id,
						cart: 2,
						address_id: address_id,
						reserve_time: data_time,
						remake_t: remark_t,
						remake_d: text_area,
						store_id: this.store_id
					}).then(res => {
						let total = res;
						this.getPay(total);
					});
				} else {
					let id_json = [];
					this.pro_info.forEach(v => {
						id_json.push({
							id: Number(v.id),
							store_id: Number(v.store_id)
						});
					});
					let idJson = JSON.stringify(id_json);
					goPay({
						cart_json: idJson,
						cart: 1,
						address_id: address_id,
						reserve_time: data_time,
						remake_t: remark_t,
						remake_d: text_area
					}).then(res => {
						let total = res;
						this.getPay(total);
					});
				}
			}
		},
		// 微信支付
		async getPay(total) {
			let payCall = await this.common.orderPay(total);
			if (payCall.errMsg == 'requestPayment:fail cancel') {
				uni.reLaunch({
					url: '../../pages/failPay/failPay?state=' + 1
				});
			} else {
				uni.reLaunch({
					url: '../../pages/successPay/successPay?state=' + 1
				});
			}
		},
		//获取订单信息
		getOrderInfo() {
			if (this.serve_id) {
				goodsDetail({
					id: this.serve_id
				}).then(res => {
					console.log(res);
					this.pro_info.push(res);
					this.total = this.pro_info[0].price;
				});
			} else {
				this.pro_info = uni.getStorageSync('pay_pro_info');
				console.log(this.pro_info);
				this.total = this.pro_info.reduce((sum, value) => sum + Number(value.price), 0).toFixed(2);
				console.log(this.total);
			}
		},
		//选择备注
		selectRemark(v, i) {
			if (this.current_remark.indexOf(i) == -1) {
				console.log(i); //打印下标
				this.current_remark.push(i); //选中添加到数组里
			} else {
				this.current_remark.splice(this.current_remark.indexOf(i), 1); //取消
			}
			console.log(this.current_remark);
		},
		//修改地址
		editAddress(e) {
			let page_obj = encodeURIComponent(JSON.stringify(e));
			console.log(page_obj);
			uni.navigateTo({
				url: '../../pages/editAddress/editAddress?page_obj=' + page_obj
			});
		},
		//删除地址
		delAddress(i) {
			console.log(i);
			console.log(this.address_list[i].id);
			let id = this.address_list[i].id;
			addressDel({
				id: id
			}).then(res => {
				console.log(res);
				this.getAllAddress();
			});
		},
		//选择地址
		selectAddress(i) {
			this.current_address = this.address_list[i];
			this.addressPopshow = false;
		},
		//获取默认地址
		getAddressDefault() {
			addressDefault().then(res => {
				console.log(res);
				this.address_default_list = res;
				this.current_address = res;
			});
		},
		//获取全部地址
		getAllAddress() {
			addressList().then(res => {
				console.log(res);
				if (res) {
					this.isAddress = true;
					this.address_list = res;
				}
			});
		},
		//获取备注选项
		getGoodRemark() {
			goodsRemark().then(res => {
				console.log(res);
				this.remark_list = res;
			});
		},
		//顶部导航栏左边点击
		// leftClick() {
		//   uni.navigateBack({
		//     delta: 1,
		//   });
		// },
		//日历时间选择点击
		active_cik(i, item) {
			this.isActive = i;
			this.isitem = item;
			this.current_date = this.tabs_list[i].date.replace('/', '-');
		},
		// 选择日历时间
		show_time_cik() {
			this.show_time = true;
			// makeTime().then((res) => {
			// 	console.log(res);
			// 	this.tabs_list = res;
			// });
			if (!this.current_date) {
				this.current_date = this.tabs_list[0].date.replace('/', '-');
			}
		},
		get_time_data() {
			makeTime().then(res => {
				this.tabs_list = res;
			});
		},
		// 点击选择具体时间
		time_cik(index, time) {
			this.is_choice = index;
			this.current_time = time;
		},
		add_address() {
			uni.navigateTo({
				url: '../../pages/addNewAddress/addNewAddress'
			});
		},
		priceInfo() {
			this.pricePopshow = true;
		},
		openAddressPop() {
			this.addressPopshow = true;
			this.getAllAddress();
		}
	}
};
</script>

<style lang="scss" scoped>
.pop-cart-address{
	height: 666rpx;
	overflow: auto;
}
.pop-cart-address::-webkit-scrollbar {
	/* ::-webkit-scrollbar webkit的伪元素，滚动条 
		伪元素只能有一个，不能多个同时出现，且只能放在最后面	
		两个冒号是css3的样式，主要与伪类区分。
	*/
	width: 0;
	height: 0;
	background-color: transparent;
}
.ractive {
	border: 1px solid #f14537;
	background-color: rgba(241, 69, 55, 0.05);
	color: #f14537;
	border-radius: 6px;
}

.zgg {
	border: 1px solid #d1d2d5;
}

.active2 {
	color: #f14537;
	border: #f14537 solid 1px;
}

// .u-textarea--radius.data-v-09988a29 {
//   border: none;
// }
.active {
	border-bottom: #f14537 solid 4rpx;
	color: #f14537;
}

.active1 {
	color: #f14537;
}

page {
	background-color: #f8f8f8;
}

.hmj-order {
	.order-tabBar {
		height: 635rpx;
		background-image: linear-gradient(#dc3e2f, #f8f8f8);
		overflow: hidden;
	}

	.notice-bar {
		border-radius: 16rpx;
		margin-top: -265rpx;
		background-color: #fdf6ec;
	}

	.order-address {
		box-sizing: border-box;
		// height: 322rpx;

		.address {
			overflow: hidden;

			.address-tips {
				width: 336rpx;
			}
		}

		.time {
			.time-tips {
				width: 290rpx;
			}
		}
	}

	.order-sever-content {
		height: 420rpx;
		box-sizing: border-box;

		.sever-content {
			> view {
				width: 418rpx;
			}
		}
	}

	.order-remark {
		.remark-content {
			view {
				line-height: 80rpx;
				text-align: center;
				width: 312rpx;
				height: 80rpx;
				background-color: #f8f8f8;
			}
		}
	}
}
</style>
